<template>
	<view class="mask">
		<view class="dialog-box">
			<view class="header-box">
				{{ info.name }}
				<!-- <img class="ip-box" src="/static/dialog/friend.png" mode=""></img> -->
			</view>
			<view class="content-box" id="content-list">
				<!-- 基本信息 -->
				<u-cell-group :border="false">
					<u-cell-item v-for="(item, index) in labelList" :title="`${item.label}:`"
						:value="['img'].includes(item.type) ? '' : info[item.prop] | filterFunction" :arrow="false"
						:border-bottom="false" hover-class="none"  :class="item.yahei ? 'yahei' : ''">
						<view v-if="item.icon === 'phone'" @click="callPhone(info[item.prop])" class="phone-icon"
							slot="right-icon">
							<u-icon name="phone-fill" color="#fff"></u-icon>
							拨打
						</view>
						<img src="/static/dialog/map.jpg" v-if="item.icon === 'map'" @click="openMap" class="img-icon"
							slot="right-icon">
						</img>
						<template v-if="item.type === 'img'">
							<img v-if="codeImg" :src="codeImg" @click="previewImage" class="code-img" slot="label">
							<text v-else class="green-text">暂无线上商城</text>
						</template>
					</u-cell-item>
				</u-cell-group>
				<!-- 供应品种 -->
				<template v-if="info.varietyList && info.varietyList.length > 0">
					<u-cell-item title="供应品种:" :arrow="false" :border-bottom="false" hover-class="none"></u-cell-item>
					<view class="item-box" v-for="(item, index) in info.varietyList" :key="index">
						<view class="item-title">
							{{ item.name }}（{{ item.publishTime || '--' }}）
						</view>
						<ul class="item-content">
							<li class="item-col" v-for="(sitem,sindex) in varietyLabel" :key="sindex">
								<view class="col-text">
									{{ sitem.label }}
								</view>
								<view class="col-num">
									{{ item[sitem.prop] || '--' }}
								</view>
							</li>
						</ul>
					</view>
				</template>
			</view>
			<view class="bottom-box">
				<view class="btn" @click="closeDialog">继续探索</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		props: {
			detailObj: {
				default: () => {
					return {
						name: '',
						address: '',
						contact: '',
						contactNum: '',
						principal: '',
						principalNum: '',
						isOpenDoor: '',
						isSelfDriving: '',
						isWholeSale: '',
						onLineCode: 'https://www.helloimg.com/image/oHl6qz',
						location: 'https://surl.amap.com/9GTATL11qbXs',
						varietyList: [{
								name: '珍珠',
								area: '150.0',
								yield: '难估计',
								publishTime: '9-11月 2-6月',
								plantTime: '4-5年',
							},
							{
								name: '珍珠',
								area: '150.0',
								yield: '难估计',
								publishTime: '9-11月 2-6月',
								plantTime: '4-5年',
							},
							{
								name: '珍珠',
								area: '150.0',
								yield: '难估计',
								publishTime: '9-11月 2-6月',
								plantTime: '4-5年',
							}
						]
					}
				},
			}
		},
		watch: {
			detailObj: {
				handler(val) {
					this.info = val;
					this.getInfo();
				}
			}
		},
		filters: {
			filterFunction: function(value) {
				if(value == "√") {
					return "✓"
				}
			    return value;
			}
		},
		data() {
			return {
				labelList: [{
						label: '果园地址',
						prop: 'address',
						icon: 'map'
					},
					{
						label: '位置',
						prop: 'street',
					},
					{
						label: '负责人',
						prop: 'principal'
					},
					{
						label: '联系电话',
						prop: 'principalNum',
						icon: 'phone'
					},
					{
						label: '订购联系人',
						prop: 'contact'
					},
					{
						label: '联系电话',
						prop: 'contactNum',
						icon: 'phone'
					},
					{
						label: '是否对外开放',
						prop: 'isOpenDoor',
						yahei: true
					},
					{
						label: '是否支持自驾',
						prop: 'isSelfDriving',
						yahei: true
					},
					{
						label: '有无停车场',
						prop: 'hasPark',
						yahei: true
					},
					{
						label: '是否支持批发',
						prop: 'isWholeSale',
						yahei: true
					},
					{
						label: '是否支持快递',
						prop: 'isExpress',
						yahei: true
					},
					{
						label: '线上商城',
						prop: 'onLineCode',
						type: 'img'
					},
				],
				info: this.detailObj,
				varietyLabel: [{
						label: '种植面积(亩)',
						prop: 'area'
					},
					{
						label: '预计产量',
						prop: 'yield'
					},
					{
						label: '种植时间',
						prop: 'plantTime'
					},
				],
				codeImg: null,
				imgPath: null, 
			}
		},
		onLoad() {
			setTimeout(() => document.getElementById("content-list").scrollTo(0))
		},
		onHide() {
			uni.hideLoading();
		},
		methods: {
			// 打电话
			callPhone(number) {
				uni.makePhoneCall({
					phoneNumber: number
				});
			},
			// 打开地图
			openMap() {
				window.open(this.info.location, '_blank')
			},
			// 预览图片
			previewImage() {
				uni.showLoading({
					title: "加载中..."
				})
				base64ToPath(this.codeImg)
					.then(path => {
						console.log(path)
						let imgs = [];
						uni.hideLoading()
						imgs[0] = path;

						uni.previewImage({
							current: 0,
							urls: imgs
						});
					})
					.catch(error => {
						console.log("错了", error)
						// 图片加载失败
						uni.hideLoading()
					})
			},
			// 预览图片
			previewImageOld() {
				if (!this.imgPath) {
					uni.showToast({
						icon: 'none',
						title: '图片无效'
					})
					return
				}
				uni.previewImage({
					urls: [this.imgPath],
					current: 0,
				})
			},
			// 关闭弹窗
			closeDialog() {
				this.$emit('update:showDialog', false)
			},
			// 获取详情
			getInfo() {
				uni.showLoading()
				uni.request({
					// url: 'http://192.168.3.14:8080/system/fruit'+ '/getFruitInfoById/' + this.info.id,
					url: this.$baseUrl + '/fruit/getFruitInfoById/' + this.info.id,
					method: 'GET',
				}).then(([error, res]) => {
					uni.hideLoading();
					//result将返回一个数组[error,{NativeData}]
					//NativeData：调取接口后返回的原生数据
					if (res.statusCode === 200) {
						this.codeImg = res.data;
						if (res.data) {
							this.codeImg = 'data:image/png;base64,' + this.codeImg;
						} else {
							this.imgPath = null;
						}
					}
				})

			},
		},
	}
</script>

<style lang="scss" scoped>
	$border-radius: 20rpx;
	.yahei {
		/deep/.u-cell__value{
			font-family: 'Microsoft YaHei' !important;
			font-weight: 900;
		}
	}
	.mask {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.4);

		.dialog-box {
			position: absolute;
			top: 5vh;
			width: 660rpx;
			max-height: 85vh;
			background: #ecf7ea;
			border-radius: $border-radius;
			overflow: hidden;

			.header-box {
				position: relative;
				width: 100%;
				height: 232rpx;
				display: flex;
				align-items: center;
				color: #005F36;
				padding: 0 200rpx 0 30rpx;
				font-size: 36rpx;
				font-style: normal;
				font-weight: 600;
				background: url("/static/dialog/bg.jpg") no-repeat;
				background-size: contain;

				.ip-box {
					position: absolute;
					bottom: -20rpx;
					right: 0rpx;
					width: 200rpx;
				}
			}

			.content-box {
				width: 100%;
				height: calc(85vh - 380rpx);
				padding: 20rpx;
				background-color: #fff;
				border-top-right-radius: $border-radius;
				overflow-y: auto;

				/deep/.u-cell {
					align-items: flex-start;
					padding: 10rpx 0;
				}

				.green-text,
				/deep/.u-cell__value {
					text-align: left;
					color: #005F36;
					font-size: 28rpx;
					font-weight: 500;
				}

				/deep/.u-cell_title {
					width: 240rpx !important;
					color: #666;
				}

				/deep/.u-cell_right {
					padding-top: 4rpx;
				}

				.img-icon {
					margin-left: 10rpx;
					width: 50rpx;
					height: auto;
				}

				.phone-icon {
					width: 110rpx;
					height: 44rpx;
					line-height: 44rpx;
					display: inline-flex;
					padding: 0rpx 10rpx;
					color: #fff;
					font-size: 24rpx;
					justify-content: center;
					align-items: center;
					gap: 8rpx;
					border-radius: 20rpx;
					background: #FAAD14;

					.u-icon {
						margin-right: 10rpx;
					}
				}

				.code-img {
					width: 100rpx;
					height: auto;
					margin-left: 240rpx;
					margin-top: -50rpx;
				}

				.item-box {
					.item-title {
						margin-bottom: 10rpx;
						color: #005F36;
						font-style: normal;
						font-weight: 500;
						padding-left: 20rpx;
					}

					.item-content {
						display: flex;
						flex-wrap: wrap;
						padding: 0;

						.item-col {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							list-style: none;
							width: calc(33% - 40rpx);
							text-align: center;
							border-radius: 20rpx;
							padding: 20rpx 10rpx;
							margin: 0 10rpx;
							margin-bottom: 30rpx;
							background: #FFF9EB;

							.col-text {
								font-size: 22rpx;
								color: #666;
								margin-bottom: 8rpx;
							}

							.col-num {
								color: #005F36;
								font-size: 26rpx;
								font-style: normal;
								font-weight: 500;
								max-width: 100%;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}

			.bottom-box {
				display: flex;
				justify-content: center;
				background: #fff;
				padding: 26rpx;

				.btn {
					display: flex;
					padding: 26rpx 149rpx;
					justify-content: center;
					align-items: center;
					gap: 10rpx;
					border-radius: 999rpx;
					background: #08C05F;
					color: #fff;
					font-size: 38rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>